<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <meta name=apple-mobile-web-app-capable content=yes>
  <meta name=apple-mobile-web-app-status-bar-style content=black>
  <meta name=format-detection content="telephone=no">
  <meta http-equiv=X-UA-Compatible content="chrome=1">
  <meta name=renderer content=webkit>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>浙江省公共数据报告</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../public/echarts.css">
  <link href="../public/iconfont.css" rel="stylesheet">
  <link rel="stylesheet" href="../public/element/index.css">
  <link rel="stylesheet" href="../public/mint-style.css">
  <link rel="stylesheet" href="hz.css">
</head>
<body>
  <!-- Swiper -->
    <div id="app" v-cloak>
        <mt-header fixed title="报表" style="font-size:18px">
            <a href="bigData.html" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <div class="main">
            <div class="contain" style="overflow: hidden;">
                <mt-navbar v-model="tabSelected">
                    <mt-tab-item id="1">总览</mt-tab-item>
                    <mt-tab-item id="2">归集</mt-tab-item>
                    <mt-tab-item id="3">治理</mt-tab-item>
                    <mt-tab-item id="4">基础库</mt-tab-item>
                    <mt-tab-item id="5">共享</mt-tab-item>
                    <mt-tab-item id="6">开放</mt-tab-item>
                </mt-navbar>
                <div style="height:calc(100% - 46px);overflow: scroll">
                    <div style="display:flex;border-left:2px solid #37a2da;padding:20px;background-color: white;margin:8px;">
                        <div style="width:48%;margin-right:2%;display:flex;flex-direction: column"> 
                            <span class="ellipsis" style="color:#37a2da;">对接62个部门</span>
                            <span class="ellipsis" style="margin-top:10px;font-size:12px;">共享API</span>
                            <span class="ellipsis" style="margin-top:4px;color:black;font-size:14px;">2160个</span>
                            <span class="ellipsis" style="margin-top:10px;font-size:12px;">调用次数</span>
                            <span class="ellipsis" style="margin-top:4px;color:black;font-size:14px;">29148763次</span>
                        </div>
                        <div style="width:48%;display:flex;flex-direction: column">
                            <span class="ellipsis" style="color:#37a2da;">222业务系统</span>
                            <span class="ellipsis" style="margin-top:10px;font-size:12px;">授权共享表</span>
                            <span class="ellipsis" style="margin-top:4px;color:black;font-size:14px;">678张</span>
                            <span class="ellipsis" style="margin-top:10px;font-size:12px;">共享表次数</span>
                            <span class="ellipsis" style="margin-top:4px;color:black;font-size:14px;">***次</span>
                        </div>
                    </div>
                    <div style="padding:10px 20px;background-color: white;margin:8px;">
                        <span style="color:black;font-size:14px;">比2018年底增长***张，增长调用***次，比2018年月平均调用次数增长**%</span>
                        <div id="main1" style="width:100%;height:200px;"></div>
                    </div>
                    <div style="background-color: white;margin:8px;">
                        <span class="divTitle">重点业务系统共享调用情况</span>
                        <div>
                            <el-table :data="tableData1" style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="系统名称"
                                    width="150"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                    prop="inter"
                                    align="center"
                                    label="接口调用量">
                                </el-table-column>
                                <el-table-column
                                    prop="share"
                                    align="center"
                                    label="表共享量">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div style="background-color: white;margin:8px;">
                        <span class="divTitle ellipsis">接口调用排名<span class="ellipsis" style="width:60%;margin-left:10px;font-size:12px;color:rgba(255,255,255,0.7)">TOP10的接口调用量占总调用量61%</span></span>
                        <div id="main2" style="width:100%;height:300px;"></div>
                    </div>
                    <div style="background-color: white;margin:8px;">
                        <span class="divTitle">接口贡献排名</span>
                        <div>
                            <el-table :data="tableData2" style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="部门名称"
                                    align="center"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                    prop="collect"
                                    align="center"
                                    label="归集表量">
                                </el-table-column>
                                <el-table-column
                                    prop="api"
                                    align="center"
                                    label="共享API数">
                                </el-table-column>
                                <el-table-column
                                    prop="use"
                                    align="center"
                                    label="被调用次数">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div style="background-color: white;margin:8px;">
                        <span class="divTitle">资源使用排名（近一月）</span>
                        <div>
                            <el-table :data="tableData3" style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="部门名称"
                                    align="center"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                    prop="cu"
                                    align="center"
                                    label="计算量(CU)">
                                </el-table-column>
                                <el-table-column
                                    prop="g"
                                    align="center"
                                    label="储存总量(G)">
                                </el-table-column>
                                <el-table-column
                                    prop="money"
                                    align="center"
                                    label="计算成本(元)">
                                </el-table-column>
                                <el-table-column
                                    prop="save"
                                    align="center"
                                    label="储存成本(元)">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <mt-tabbar v-model="selected">
            <mt-tab-item id="tab1">
                <i slot="icon" class="iconfont iconshouye" @click="changeUrl('bigData.html')"></i>
                <span @click="changeUrl('bigData.html')">首页</span>
            </mt-tab-item>
            <mt-tab-item id="tab2" >
                <i slot="icon" class="iconfont icondaiban" @click="changeUrl('bigNeedTo.html')"></i>
                <span @click="changeUrl('bigNeedTo.html')"></span>待办</span>
            </mt-tab-item>
            <mt-tab-item id="tab3">
                <i slot="icon" class="iconfont iconbaobiaozhongxin" @click="changeUrl('bigReport.html')"></i>
                <span @click="changeUrl('bigReport.html')"></span>报表</span>
            </mt-tab-item>
            <mt-tab-item id="tab4">
                <i slot="icon" class="iconfont iconyaoqingdaoshi"></i>
                <span>反馈</span>
            </mt-tab-item>
            <mt-tab-item id="tab5">
                <i slot="icon" class="iconfont iconzixun"></i>
                咨询
            </mt-tab-item>
        </mt-tabbar>
    </div>

  <!-- Swiper JS -->
  <script src="../public/vue.js"></script>
  <script src="../public/echarts.js"></script>
  <script src="../public/element/index.js"></script>
  <script src="../public/mint.js"></script>
  <script src="../public/sass.js"></script>
  <script>
      var app = new Vue({
        el: '#app',
        data: {
            selected:'tab3',
            tabSelected:'5',
            tableData1: [{
                inter: '222',
                name: '“浙政钉”掌上办公平台',
                share: '11111'
            }, {
                inter: '222',
                name: '基层治理四平台',
                share: '11111'
            }, {
                inter: '222',
                name: '一体化互联网政务服务',
                share: '11111'
            }, {
                inter: '222',
                name: '统一政务咨询投诉举报',
                share: '11111'
            },{
                inter: '222',
                name: '经济运行监测分析数字化',
                share: '11111'
            }],
            tableData2: [
            {
                name: '公安厅',
                collect:'222',
                api: '111',
                use:'33'
            }, {
                name: '自然资源厅',
                collect:'222',
                api: '111',
                use:'33'
            }, {
                name: '商务厅',
                collect:'222',
                api: '111',
                use:'33'
            }, {
                name: '统计局',
                collect:'222',
                api: '111',
                use:'33'
            },{
                name: '国资委',
                collect:'222',
                api: '111',
                use:'33'
            }],
            tableData3: [{
                name: '公安厅',
                cu:'333',
                g: '222',
                money:'6.6',
                save:'6.6'
            }, {
                name: '自然资源厅',
                cu:'333',
                g: '222',
                money:'6.6',
                save:'6.6'
            }, {
                name: '商务厅',
                cu:'333',
                g: '222',
                money:'6.6',
                save:'6.6'
            }, {
                name: '统计局',
                cu:'333',
                g: '222',
                money:'6.6',
                save:'6.6'
            },{
                name: '国资委',
                cu:'333',
                g: '222',
                money:'6.6',
                save:'6.6'
            }]
        },
        methods: {
            changeUrl(url){
                window.location.href = url
            }
        },
        computed: {
            
        },
        filters: {
            
        },
        mounted: function () {
            var option1 = {
                color:['#0083B0','#F5A51F'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['共享调用','共享表'],
                    x: 'right',
                    top:'3%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: 20,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2018/12','2019/01','2019/02','2019/03','2019/04']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'共享调用',
                        type:'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data:[24.6, 10000, 5200, 25000, 30000]
                    },
                    {
                        name:'共享表',
                        type:'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data:[24.6, 3600, 5000, 6000, 10000]
                    }
                ]
            }
            var myChart1 = echarts.init(document.getElementById('main1'));
            myChart1.setOption(option1);
            var option2 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{b} :  {d}%"
                },
                color:['#8BC34A','#02BBD1','#D0021B','#FF5E2C',
                '#4CAF50','#FCCF31','#F9A825','#795548','#00BCD4',
                '#3E50B5','#007598F'],
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: ['人口信息查询','婚姻登记信息查询','省公安厅居民身份证（新）',
                    '省公安厅居民户口簿（个人）','省公安厅居民身份证','法人登记基本信息',
                    '企业基本信息查询','个人实名认证信息查询','国家人口库基准信息查询接口',
                    '社会保障个人参保信息查询','其他']
                },
                series : [
                    {
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            formatter: '{d}%'
                        },
                        name: '访问来源',
                        type: 'pie',
                        radius : '40%',
                        center: ['20%', '50%'],
                        data:[
                            {value:35, name:'人口信息查询'},
                            {value:30, name:'婚姻登记信息查询'},
                            {value:20, name:'省公安厅居民身份证（新）'},
                            {value:22, name:'省公安厅居民户口簿（个人）'},
                            {value:10, name:'省公安厅居民身份证'},
                            {value:30, name:'法人登记基本信息'},
                            {value:25, name:'企业基本信息查询'},
                            {value:18, name:'个人实名认证信息查询'},
                            {value:10,name:'国家人口库基准信息查询接口'},
                            {value:2, name:'社会保障个人参保信息查询'},
                            {value:8, name:'其他'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var myChart2 = echarts.init(document.getElementById('main2'));
            myChart2.setOption(option2);
        }
    })
  </script>

</body>

</html>
